<template>
  <div class="echartsWeb">
    <div class="echarts" id="energyEankey"></div>
  </div>
</template>
  
  <script>
import echarts from "@/utils/lib/echarts";
import { SankeyChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([SankeyChart, CanvasRenderer]);

export default {
  methods: {
    initChart(data) {
      if (!data) {
        return false;
      }
      let arr = data.names.map((item) => {
        return (item = {
          name: item,
        });
      });
      let getchart = echarts.init(document.getElementById("energyEankey"));
      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "sankey",
            data: arr,
            links: data.links,
            emphasis: {
              focus: "adjacency",
            },
            levels: [
              {
                depth: 0,
                itemStyle: {
                  color: "#fbb4ae",
                },
                lineStyle: {
                  color: "source",
                  opacity: 0.6,
                },
              },
              {
                depth: 1,
                itemStyle: {
                  color: "#b3cde3",
                },
                lineStyle: {
                  color: "source",
                  opacity: 0.6,
                },
              },
              {
                depth: 2,
                itemStyle: {
                  color: "#ccebc5",
                },
                lineStyle: {
                  color: "source",
                  opacity: 0.6,
                },
              },
              {
                depth: 3,
                itemStyle: {
                  color: "#decbe4",
                },
                lineStyle: {
                  color: "source",
                  opacity: 0.6,
                },
              },
            ],
            lineStyle: {
              curveness: 0.5,
            },
          },
        ],
      };
      // var option = {
      //   series: {
      //     type: "sankey",
      //     layout: "none",
      //     emphasis: {
      //       focus: "adjacency",
      //     },
      //     data: arr,
      //     links: data.links,
      //     emphasis: {
      //       focus: "adjacency",
      //     },
      //     tooltip: {
      //       trigger: "item",
      //       triggerOn: "mousemove",
      //     },
      //     levels: [
      //       {
      //         depth: 0,
      //         itemStyle: {
      //           color: "#fbb4ae",
      //         },
      //         lineStyle: {
      //           color: "source",
      //           opacity: 0.6,
      //         },
      //       },
      //       {
      //         depth: 1,
      //         itemStyle: {
      //           color: "#b3cde3",
      //         },
      //         lineStyle: {
      //           color: "source",
      //           opacity: 0.6,
      //         },
      //       },
      //       {
      //         depth: 2,
      //         itemStyle: {
      //           color: "#ccebc5",
      //         },
      //         lineStyle: {
      //           color: "source",
      //           opacity: 0.6,
      //         },
      //       },
      //       {
      //         depth: 3,
      //         itemStyle: {
      //           color: "#decbe4",
      //         },
      //         lineStyle: {
      //           color: "source",
      //           opacity: 0.6,
      //         },
      //       },
      //     ],
      //     lineStyle: {
      //       curveness: 0.5,
      //     },
      //   },
      // };
      getchart.setOption(option);
    },
  },
};
</script>
  <style scoped lang="scss">
.echartsWeb {
  width: 100%;
  height: 80%;
  // padding-left: 24px;
  box-sizing: border-box;

  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
  